<style type="text/css">
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 9px;
  color: #333;
}
</style>
<?php use_javascript('jquery/js/jquery-1.5.1.min.js') ?>

<input type="button" id="launchAll" value="Lancer"/>
<input type="button" id="pause" value="Pause"/>

<ul id="listeCommune">
<?php foreach ($communes as $commune): ?>
  <li id="commune-<?php echo $commune->getInsee() ?>" class="commune">
    <em><?php echo $commune->getZipCode() ?></em>
    <strong><?php echo $commune->getCity() ?></strong>
    <span><?php echo $commune->getInsee() ?></span>
  </li>
<?php endforeach; ?>
</ul>


<script type="text/javascript">
  var auto = false;
  var current = null;

$(function(){
  $('#launchAll').bind('click', function(){
    auto = true;
    updateAll();
  });

  $('#pause').bind('click', function(){
    auto = false;
  });

  $('li.commune').bind('click', function(){
    current = $(this);

    var commune = $(this).find('strong').text();
    var insee   = $(this).find('span').text();
    var cp      = $(this).find('em').text();
    
    $.ajax({
      url: "/jckLocationTools/synchronizeCommune",
      data: {
        commune: commune,
        insee: insee,
        cp: cp
      },
      success: function(data){
        
        current.css('color', '#fff');
        if( data == 'OK' ){
          current.css('background', '#009900');
        } else if ( data == 'UNCHANGE' ){
          current.css('background', '#999999');
        } else {
          current.css('background', '#990000');
        }
        
        current = current.next();
        updateAll();
      }
    });
  })
});


function updateAll(){
  if( !auto ) return;

  if( current == null ){
    current = $('#listeCommune li').first();
  }
  current.trigger('click');
}
</script>
